<template>
    <div>
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(item,index) in recruitInfo" :key="index">
                <img :src="item.pro_pic_url" alt="">
                <p class="desc"><span>{{item.pro_title}}</span><span class="iconfont icon-mudedi">{{item.country}}</span></p>
                <p class="desc">
                    <span class="spans iconfont icon-shijian">{{item.routing_data}}天{{item.routing_nigth}}晚</span>
                    <span class="spans iconfont icon-qian">{{item.amount}}元起</span>
                </p>
            </van-swipe-item>
        </van-swipe>
        <p class="sign">
            <van-icon name="certificate" /><span>不用懂外语</span>
            <van-icon name="certificate" /><span>不用懂攻略</span>
            <van-icon name="certificate" /><span>没有购物坑</span>
            <van-icon name="certificate" /><span>不用折腾自己</span>
        </p>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import '@/assets/iconfont1/iconfont.css'

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data () {
        return {
            recruitInfo:[]
        };
    },

    components: {},

    computed: {},
    created(){
        let reqBody4={
            "desc": false,
            "orderBy": "outtime",
            "pageSize": 100,
            "product_type": 2
        }
        this.$http.post('http://www.51houniao.com/requirement/request/getMatchedProducts',reqBody4)
        .then(res=>{
            this.recruitInfo=res.matchedProducts
            // console.log(this.recruitInfo)
        })
    },
    mounted() {},

    methods: {}
}

</script>
<style scoped>
img{
    width:360px;
    height:150px;
}
.desc span{
    display: inline-block;
    font-size:12px;
    margin-left:20px;
}
.sign{
    line-height:30px;
    font-size:12px;
    border-top:1px solid #666;
}
.sign span{
    display: inline-block;
    margin-right:18px;
}
</style>